<template>
  <div class="container box card">
      <div class="header">
          <div class="logo">
            <img class="logo-img" src="~assets/img/timecube-logo.png">
          </div>
          <div class="title">
              <h3>注册中控云帐号</h3>
          </div>
      </div>
      <div class="content" v-show="state.step==1">
        <user-name-form :account.sync="account" :state.sync="state"></user-name-form>
      </div>
      <div class="content" v-show="state.step==2">
        <dy-code-form :account.sync="account" :state.sync="state"></dy-code-form>
      </div>
      <div class="content" v-show="state.step==3">
        <pwd-form :account.sync="account" :state.sync="state"></pwd-form>
      </div>
      <div class="content" v-show="state.step==4">
        <form role="form" name="Form" class="col-md-4 col-md-offset-4 col-sm-12" autocomplete="off" novalidate>
            <div class="form-group">
              <h1><i class="fa fa-check-circle primary" aria-hidden="true"></i> 恭喜您，完成注册</h1>
            </div>
            <div class="form-group">
                <button type="button" v-on:click.prevent="tologin" class="form-control btn btn-success register">马上登陆</button>
            </div>
        </form>
        <div class="clearfix"></div>
      </div>
  </div>
</template>

<script>
/**
 * @author guocailee
 */
import * as checkService from 'src/api/check'
import UserNameForm from './UserNameForm.vue'
import DyCodeForm from './DyCodeForm.vue'
import PwdForm from './PwdForm.vue'
export default {
  data: () => {
    let account = {
      username: null,
      password: null,
      repassword: null,
      imgCode: null,
      dyCode: null
    }
    let state = {
      step: 1,
      resendTime: null,
      timeoutId: null
    }
    return { account, state }
  },
  methods: {
    timeStart () {
      var self = this
      self.state.resendTime = 60
      if (self.state.timeoutId) {
        return
      }
      self.state.timeoutId = setInterval(() => {
        self.state.resendTime --
        if (self.state.resendTime === 0) {
          clearInterval(self.state.timeoutId)
          self.state.resendTime = null
          self.state.timeoutId = null
        }
      }, 1000)
    },
    tologin () {
      window.location.href = '/signin.html'
    }
  },
  events: {
    sendSms () {
      this.timeStart()
      return new Promise((resolve, reject) => {
        checkService.sendsmsregistercaptcha(this.account.username).then(() => {
          resolve()
        }).catch(data => {
          reject(data)
        })
      })
    }
  },
  components: {
    UserNameForm,
    DyCodeForm,
    PwdForm
  }
}
</script>